<!--左按钮，右搜索-->
<div class="toolbar margin-bottom btn-and-search" [ngClass]="isMobile?'wrap-mobile':'wrap'">
  <div class="item" [ngClass]="isMobile?'item-mobile':''" nz-col nzXs="24" nzSm="24" nzMd="14" nzLg="14" nzXl="18">
    <button class="margin-right" nz-button nzType="primary" (click)="addUser()">
      <i nz-icon nzType="plus" nzTheme="outline"></i><span>添加</span>
    </button>
    <button class="margin-right" nz-button nzType="default" (click)="dimissionUser()">
      <i nz-icon nzType="user-delete" nzTheme="outline"></i><span>离职人员</span>
    </button>
    <button class="margin-right" nz-button nzType="default" (click)="findStaffList(0)" *ngIf="userInfo.roleId == 1">
      <i nz-icon nzType="user-delete" nzTheme="outline"></i><span>查看本机构人员</span>
    </button>
    <button class="margin-right" nz-button nzType="default" (click)="findStaffList(1)" *ngIf="userInfo.roleId == 1">
      <i nz-icon nzType="user-delete" nzTheme="outline"></i><span>查看全部机构人员</span>
    </button>
  </div>

  <div class="item" [ngClass]="isMobile?'item-mobile':''" nz-col nzXs="24" nzSm="24" nzMd="10" nzLg="10" nzXl="6">
    <nz-input-group nzSearch [nzAddOnAfter]="suffixIconButton">
      <input type="text" nz-input placeholder="请输入账号/姓名/手机号" [(ngModel)]="pageHelper.keyword"/>
    </nz-input-group>
    <ng-template #suffixIconButton>
      <button nz-button nzType="primary" nzSearch (click)="findStaffList(code)"><i nz-icon nzType="search"></i></button>
    </ng-template>
  </div>

</div>

<div [ngClass]="isMobile?'wrap-mobile':'wrap'">
  <nz-table #nzTable [nzData]="userList" nzTableLayout="fixed" [nzScroll]="{ x: 'auto' }"
            [(nzPageIndex)]="pageHelper.currentPage" [nzFrontPagination]="false"
            (nzPageIndexChange)="nzPageIndexChange($event)"
            [(nzPageSize)]="pageHelper.pageSize" [nzTotal]="pageHelper.totalItems">
    <thead>
    <tr>
      <th>账号</th>
      <th>姓名</th>
      <th>机构</th>
      <th>性别</th>
      <th>手机号</th>
      <th>状态</th>
      <th>角色</th>
      <th>最近登录</th>
      <th>操作</th>
    </tr>
    </thead>

    <tbody>
    <tr *ngFor="let data of nzTable.data">
      <td nzEllipsis>{{ data.username }}</td>
      <td nzEllipsis>{{ data.name }}</td>
      <td nzEllipsis>{{ data.agencyName}}</td>
      <td nzEllipsis>
        <span *ngIf="data.sex == 1">男</span>
        <span *ngIf="data.sex == 2">女</span>
      </td>
      <td nzEllipsis>{{ data.mobile }}</td>
      <td nzEllipsis>
        <span *ngIf="data.status == '0'">正常</span>
        <span *ngIf="data.status == '1'">账号错误或不存在</span>
        <span *ngIf="data.status == '2'">账号过期</span>
        <span *ngIf="data.status == '3'">任证过期</span>
        <span *ngIf="data.status == '4'">账号锁定</span>
      </td>
      <td nzEllipsis>
        {{data.roleName}}
        <!--        <nz-tag *ngFor="let role of data.roles">{{role.label}}</nz-tag>-->
      </td>
      <td nzEllipsis>
        {{data.lastLoginTime | date:"yyyy-MM-dd HH:mm:ss"}}
      </td>
      <td nzEllipsis>
        <!--        <a (click)="update(data)">详情</a>-->
        <a (click)="update(data)">编辑</a>
        <nz-divider nzType="vertical"></nz-divider>
        <a (click)="updatePwd(data)">重置密码</a>
        <nz-divider nzType="vertical"></nz-divider>
        <a (click)="delete(data,userStatus.DISLODGE)" *ngIf="data.roleId != 1">离职</a>
      </td>
    </tr>
    </tbody>
  </nz-table>
</div>

<app-staff-edit [isEditVisible]="isEditVisible" (emit)="setEditVisible($event)" #edit></app-staff-edit>
<app-staff-dimission-list [dimissionIsVisible]="dimissionIsVisible" (emit)="dimissionFlag($event)"
                          [dimissionUserList]="dimissionUserList" (dimissionLoad)="dimissionLoad()"
                          [userInfo]="userInfo"></app-staff-dimission-list>
